<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>个人中心 - 教师测评系统</title>
    <!-- Bootstrap 5 CSS -->
    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link th:href="@{/static/css/bootstrap-icons.css}" rel="stylesheet">

    <style>
    :root {
      --primary-color: #3f6ad8;
      --primary-light: rgba(63, 106, 216, 0.1);
      --primary-dark: #2952bb;
      --primary-gradient: linear-gradient(135deg, #3f6ad8 0%, #2952bb 100%);
      --secondary-color: #6c757d;
      --success-color: #2dce89;
      --success-light: rgba(45, 206, 137, 0.1);
      --warning-color: #fb6340;
      --warning-light: rgba(251, 99, 64, 0.1);
      --danger-color: #f5365c;
      --light-color: #f8f9fe;
      --dark-color: #344767;
      --text-muted: #8a94a6;
      --border-radius: 16px;
      --card-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
      --hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    }

    body {
      font-family: 'Noto Sans SC', 'Poppins', sans-serif;
      background-color: var(--light-color);
      background-image:
        radial-gradient(circle at 5% 10%, rgba(63, 106, 216, 0.05) 0%, transparent 15%),
        radial-gradient(circle at 95% 90%, rgba(63, 106, 216, 0.05) 0%, transparent 15%);
      padding-bottom: 80px; /* 为底部导航栏预留空间 */
      color: var(--dark-color);
      min-height: 100vh;
    }

    /* 导航栏 */
    .nav-bottom {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 66px;
      background-color: #fff;
      box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.07);
      display: flex;
      z-index: 1000;
      border-radius: 24px 24px 0 0;
      padding: 0 10px;
    }

    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      text-decoration: none;
      font-size: 12px;
      line-height: 1;
      transition: all 0.3s ease;
      position: relative;
      font-weight: 500;
      padding: 12px 0;
    }

    .nav-item.active {
      color: var(--primary-color);
    }

    .nav-item.active:after {
      content: '';
      position: absolute;
      bottom: 8px;
      width: 24px;
      height: 3px;
      background-color: var(--primary-color);
      border-radius: 3px;
    }

    .nav-icon {
      font-size: 24px;
      margin-bottom: 5px;
    }

    /* 页面容器 */
    .page-container {
      padding-top: 25px;
      padding-bottom: 30px;
      max-width: 540px;
      margin: 0 auto;
    }

    /* 卡片样式 */
    .card {
      border-radius: var(--border-radius);
      box-shadow: var(--card-shadow);
      margin-bottom: 24px;
      border: none;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      overflow: hidden;
      background-color: #fff;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: var(--hover-shadow);
    }

    .card-body {
      padding: 24px;
    }

    /* 用户头像 */
    .avatar-circle {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: var(--primary-gradient);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      box-shadow: 0 10px 25px rgba(63, 106, 216, 0.2);
    }

    .avatar-circle i {
      font-size: 46px;
      color: #fff;
    }

    /* 数字统计 */
    .stat-box {
      background-color: var(--light-color);
      border-radius: 14px;
      padding: 16px 10px;
      transition: all 0.3s ease;
    }

    .stat-box:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    .stat-number {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 5px;
      background: var(--primary-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* 菜单项 */
    .menu-item {
      border-radius: 12px;
      padding: 16px;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      border: 1px solid rgba(0, 0, 0, 0.03);
    }

    .menu-item:hover {
      background-color: var(--primary-light);
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    .menu-item i.menu-icon {
      font-size: 22px;
      width: 46px;
      height: 46px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 14px;
    }

    .primary-icon {
      color: var(--primary-color);
      background-color: var(--primary-light);
    }

    .success-icon {
      color: var(--success-color);
      background-color: var(--success-light);
    }

    .danger-icon {
      color: var(--danger-color);
      background-color: rgba(245, 54, 92, 0.1);
    }

    .menu-title {
      font-weight: 500;
      font-size: 16px;
      color: var(--dark-color);
    }

    .chevron-icon {
      font-size: 20px;
      color: var(--text-muted);
    }

    /* 动画效果 */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .fadeInUp {
      animation: fadeInUp 0.6s ease forwards;
    }

    /* 退出按钮 */
    .logout-btn {
      background: none;
      border: none;
      width: 100%;
      text-align: left;
      cursor: pointer;
      padding: 0;
    }
    </style>
</head>
<body>
<div class="container page-container">
    <!-- 用户信息卡片 -->
    <div class="card fadeInUp" style="animation-delay: 0.1s">
        <div class="card-body p-4 text-center">
            <div class="mb-4">
                <div class="avatar-circle mx-auto">
                    <i class="bi bi-person-fill"></i>
                </div>
                <h5 id="userName" class="mb-2 fw-bold">用户名</h5>
                <p id="userRole" class="text-muted mb-0">角色</p>
            </div>
            <div class="row mt-4">
                <div class="col-6">
                    <div class="stat-box">
                        <div class="text-muted small mb-1">待评测</div>
                        <div id="pendingCount" class="stat-number">0</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="stat-box">
                        <div class="text-muted small mb-1">已完成</div>
                        <div id="completedCount" class="stat-number">0</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 功能菜单 -->
    <div class="fadeInUp" style="animation-delay: 0.2s">
        <a href="/h5/index" class="menu-item text-decoration-none">
            <div class="d-flex align-items-center">
                <i class="bi bi-list-check menu-icon primary-icon"></i>
                <span class="menu-title">我的测评任务</span>
            </div>
            <i class="bi bi-chevron-right chevron-icon"></i>
        </a>

        <a href="/h5/result" class="menu-item text-decoration-none">
            <div class="d-flex align-items-center">
                <i class="bi bi-bar-chart-line menu-icon success-icon"></i>
                <span class="menu-title">我的测评结果</span>
            </div>
            <i class="bi bi-chevron-right chevron-icon"></i>
        </a>

        <div class="menu-item">
            <button id="logoutBtn" class="logout-btn">
                <div class="d-flex align-items-center">
                    <i class="bi bi-box-arrow-right menu-icon danger-icon"></i>
                    <span class="menu-title text-danger">退出登录</span>
                </div>
            </button>
        </div>
    </div>

    <!-- 系统信息 -->
    <div class="mt-5 text-center fadeInUp" style="animation-delay: 0.3s">
        <p class="text-muted small mb-1">教师测评系统 v1.0.0</p>
        <p class="text-muted small">© 2023 版权所有</p>
    </div>
</div>

<!-- 底部导航栏 -->
<div class="nav-bottom">
    <a href="/h5/index" class="nav-item">
        <div class="nav-icon">
            <i class="bi bi-house-door"></i>
        </div>
        <div>首页</div>
    </a>
    <a href="/h5/my" class="nav-item active">
        <div class="nav-icon">
            <i class="bi bi-person-fill"></i>
        </div>
        <div>我的</div>
    </a>
</div>

<!-- jQuery -->
<script th:src="@{/static/js/jquery-3.6.0.min.js}"></script>
<!-- Bootstrap JS -->
<script th:src="@{/static/js/bootstrap.bundle.min.js}"></script>

<script th:inline="javascript">
    $(document).ready(function() {
      loadUserInfo();

      // 加载用户信息
      function loadUserInfo() {
        // 实际项目中应从后端获取用户信息
        // 这里使用模拟数据
        const userInfo = {
          name: '张三',
          role: '教师'
        };

        $('#userName').text(userInfo.name);
        $('#userRole').text(userInfo.role);

        // 加载统计数据
        loadStatistics();
      }

      // 加载统计数据
      function loadStatistics() {
        // 获取当前周期
        const periodId = /*[[${currentPeriod != null ? currentPeriod.id : 0}]]*/'0';

        if (periodId == 0) {
          $('#pendingCount').text('0');
          $('#completedCount').text('0');
          return;
        }

        // 从后端获取任务列表，统计待评测和已完成的数量
        $.ajax({
          url: '/api/assessment/tasks?periodId=' + periodId,
          method: 'GET',
          headers: {
            'Authorization': 'Bearer ' + localStorage.getItem('token')
          },
          success: function(resp) {
            if (resp.code === 200) {
              const tasks = resp.data || [];
              const pendingCount = tasks.filter(t => t.assessStatus === 0).length;
              const completedCount = tasks.filter(t => t.assessStatus === 1).length;

              $('#pendingCount').text(pendingCount);
              $('#completedCount').text(completedCount);
            }
          }
        });
      }

      // 退出登录
      $('#logoutBtn').click(function() {
        const confirmDialog = `
          <div class="position-fixed top-50 start-50 translate-middle p-4 bg-white rounded-3 shadow-lg" style="z-index: 1100; max-width: 90%; width: 320px;">
            <div class="text-center mb-3">
              <i class="bi bi-question-circle text-warning" style="font-size: 48px;"></i>
            </div>
            <h5 class="text-center mb-3">确定要退出登录吗？</h5>
            <div class="d-flex justify-content-center gap-2 mt-4">
              <button id="cancelLogout" class="btn btn-outline-secondary px-4 rounded-pill">取消</button>
              <button id="confirmLogout" class="btn btn-danger px-4 rounded-pill">退出</button>
            </div>
          </div>
          <div class="position-fixed top-0 start-0 w-100 h-100" style="background: rgba(0,0,0,0.5); z-index: 1050;"></div>
        `;

        $('body').append(confirmDialog);

        $('#cancelLogout').click(function() {
          $('.position-fixed').remove();
        });

        $('#confirmLogout').click(function() {
          localStorage.removeItem('token');
          window.location.href = '/h5/login';
        });
      });
    });
</script>
</body>
</html>
